<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../css/header.css" />
	</head>

	<body>

		<header class="mui-bar mui-bar-nav title">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: white;"></a>
			<a id="link_uploadData" class="mui-icon mui-icon-right-nav mui-pull-right" 
							style="color: white;font-size: 14px;line-height: 27px;">上传新资料</a>
			<h1 class="mui-title title-color">已上传资料列表</h1>
		</header>

		<div id="pullrefresh" class="mui-content">
			
			<ul class="mui-table-view" id="ul_data_list" style="margin-bottom: 10px;">
				<!-- <li class="data_li mui-table-view-cell mui-media">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-left" src="../../images/1.jpg">
						<span id="span_nickname" class="mui-pull-right">
							<button type="button" class="passRequest mui-btn mui-btn-green" style="padding: 4px 10px;">下载</button>
						</span>
						<div class="mui-media-body">
							<label>文件名：xxx</label>
							<p class="mui-ellipsis">上传日期:2021-03-08 12:20:31</p>
						</div>
					</a>
				</li> -->
			</ul>

		</div>

		<script src="../../js/mui.min.js"></script>
		<script src="../../js/app.js"></script>
		<script type="text/javascript">
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						style:'circle',
						callback: loadDataFileList
					}
				}
			});
			var userinfo;
			mui.plusReady(function() {
				userinfo = app.getGlobalUserInfo();
				
				loadDataFileList();
			    // mui('#pullrefresh').pullRefresh();
				
				// 点击上传新资料按钮
				document.getElementById("link_uploadData").addEventListener("tap", function() {
					// 选择文件进行上传
					app.pickFile.PickFile(function(fileSrc){
					    console.log(fileSrc);
						plus.nativeUI.showWaiting("正在上传...");
					    //_this.fileSrc = 'file://' + fileSrc;  
					    // _this.fileSrc = 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/audio/music.mp3'  
					    // 这里就会得到 你选择的文件路径。拿到路径后，你可以用uni.uploadFile  进行上传。  
						var task = plus.uploader.createUpload(app.serverUrl + "/user/teacher/uploadData", 
							{ method:"POST",priority:100 },
							function ( t, status ) {
								plus.nativeUI.closeWaiting();
								// 上传完成
								if ( status == 200 ) { 
									app.showToast("上传成功！", "success");
									// 重新加载已上传文件列表
									loadDataFileList();
								} else {
									app.showToast("上传失败：" + status, "error");
								}
							}
						);
						task.addFile(fileSrc, {key:"file"} );
						
						// 从字符串路径中获取文件名
						var fileName = fileSrc.substr(fileSrc.lastIndexOf("/") + 1);
						task.addData("fileName", fileName);
						task.addData("user_id", userinfo.user_id);
						//task.addEventListener( "statechanged", onStateChanged, false );
						task.start();
					}, '*/*');
				});
			});
			
			// 加载资料文件
			function loadDataFileList() {
				mui.ajax(app.serverUrl + "/user/teacher/getDatasByTeacher_id", {
					data:{
						user_id: userinfo.user_id
					},
					dataType:'json',//服务器返回json格式数据
					type:'post',//HTTP请求类型
					timeout:10000,//超时时间设置为10秒；
					headers:{'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'},	              
					success:function(data){
						if(data.status == 200) {
							// 获取页面ul元素
							var ul_data_list = document.getElementById("ul_data_list");
							var datas = data.data;
							var data_lis = [];
							for(var i = 0; i < datas.length; i++) {
								data_lis.push(renderDataLi(datas[i]));
							}
							ul_data_list.innerHTML = data_lis.join("");
							
							// 给每一项资料信息列表项的下载按钮添加点击事件
							mui(".data_li").on("tap", ".download", function() {
								// 获取资料下载路径
								var d_src = this.getAttribute("d_src");
								// 资料名称
								var d_name = this.getAttribute("d_name");
								// 下载资料
								// 创建下载任务
								createDownload(d_src, d_name)
							});
							
							// 给每一项资料信息列表项的删除按钮添加点击事件
							mui(".data_li").on("tap", ".delete", function() {
								var _this = this;
								mui.confirm('是否删除该文件？', '删除完成', ['否', '是'], function(e) {
									if (e.index == 1) {
										// 获取资料下载路径
										var d_src = _this.getAttribute("d_src");
										// 资料编号
										var d_id = _this.getAttribute("d_id");
										// 删除资料
										deleteDataById(d_src, d_id);
									} else {
									}
								});
							});
							
							// 关闭下拉加载提示
							mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
						} else {
							app.showToast(data.msg, "error");
						}
					},
					error:function(xhr,type,errorThrown){
						//异常处理；
						console.log(type);
					}
				});
			}
			
			// 渲染资料列表中的某一项的HTML
			function renderDataLi(data) {
				// 根据文件类型选择不同的文件类型图标
				var d_type = data.d_type;
				var iconSrc = "unknown.png";
				if(d_type == "jpg" || d_type == "png" || d_type == "gif") {
					iconSrc = "image.png";
				} else if(d_type == "avi" || d_type == "mp4" || d_type == "avi" || 
				          d_type == "mov" || d_type == "flv" || d_type == "3gp" || 
						  d_type == "rmvb" || d_type == "rm") {
					iconSrc = "vedio.png";
				} else if(d_type == "mp3" || d_type == "wav") {
					iconSrc = "audio.png"
				} else if(d_type == "pdf") {
					iconSrc = "pdf.png";
				} else if(d_type == "txt") {
					iconSrc = "txt.png";
				} else if(d_type == "doc" || d_type == "docx") {
					iconSrc = "word.png";
				} else if(d_type == "xls" || d_type == "xlsx") {
					iconSrc = "excel.png";
				} else if(d_type == "ppt" || d_type == "pptx") {
					iconSrc = "ppt.png";
				}
				return '<li class="data_li mui-table-view-cell mui-media">' +
						   '<div class="mui-slider-right mui-disabled">' +
							   '<a d_src="' + data.d_src + '" d_name="' + data.d_name + '" class="mui-btn mui-btn-green download">下载</a>' +
							   '<a d_src="' + data.d_src + '" d_id="' + data.d_id + '" class="mui-btn mui-btn-red delete">删除</a>' +
						   '</div>' +
						   '<img class="mui-media-object mui-pull-left" src="../../images/file_type/' + iconSrc + '">' +
						   '<div class="mui-media-body mui-slider-handle">' +
							   '<label>文件名：' + data.d_name + '</label>' +
							   '<p class="mui-ellipsis">上传日期：' + data.d_date + '</p>' +
						   '</div>' +
					   '</li>';
			}
			
			// 创建下载任务
			function createDownload(d_src, d_name) {
				var dtask = plus.downloader.createDownload(
					app.imgServerUrl + d_src, 
					{
						filename: "_downloads/" + d_name
					}, 
					function(d, status){
					// 下载完成
					if(status == 200){ 
						app.showToast("文件已经保存到：" + d.filename);
						
						mui.confirm('是否打开该文件？', '下载完成', ['否', '是'], function(e) {
							if (e.index == 1) {
								plus.runtime.openFile(d.filename, {}, function(e) {//打开文件
									plus.nativeUI.toast('打开失败');
								});
							} else {
							}
						});
					} else{
						app.showToast("文件下载失败：" + status);
					}  
				});
				//dtask.addEventListener("statechanged", onStateChanged, false);
				dtask.start(); 
			}
			
			// 删除资料
			function deleteDataById(d_src, d_id) {
				mui.ajax(app.serverUrl + "/user/teacher/deleteDataById", {
					data:{
						d_src: d_src,
						d_id: d_id
					},
					dataType:'json',//服务器返回json格式数据
					type:'post',//HTTP请求类型
					timeout:10000,//超时时间设置为10秒；
					headers:{'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'},	              
					success:function(data){
						if(data.status == 200) {
							app.showToast("资料已删除！", "success");
							// 重新加载已上传文件列表
							loadDataFileList();
						} else {
							app.showToast(data.msg, "error");
						}
					},
					error:function(xhr,type,errorThrown){
						//异常处理；
						console.log(type);
					}
				});
			}
		</script>
	</body>

</html>